 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!-- 标题 -->
    <title>会员系统</title>
    <!-- 关键词 -->
    <meta name="keywords" content="" />
    <!-- 网站简介 -->
    <meta name="description" content="" />
    <!-- 自适应屏幕 -->
    <meta name="viewport" content="width=device-width,height=device-height,inital-scale=1.0,maximum-scale=1.0,user-scalable=no;">
      <!-- IE兼容 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- 最新 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="css/bootstrap.css">
    <!-- 开关 CSS 文件 -->
    <link rel="stylesheet" href="css/switch.css">
    <!-- 核心 CSS 文件 -->
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <div class="member-wrap clearfix">
         <!-- 左侧导航 -->
         <div class="nav-left" >
            <div class="black-bg"></div>
            <ul>
                <li class="user-info"> 
                    <a href="">
                       <img src="images/user1.png" alt="" >
                       <p>Admin</p>
                    </a>
                </li>
                <li class="active">
                    <a href="index.html">
                       <img src="images/icon1.png" alt="" style="width:25px">
                       <p>会员卡</p>
                    </a>
                </li>
                <li>
                    <a href="charge.html">
                       <img src="images/icon2.png" alt="" style="width:26px">
                       <p>充值</p>
                    </a>
                </li>
                <li >
                    <a href="report.html">
                       <img src="images/icon3.png" alt="" style="width:25px">
                       <p>报表</p>
                    </a>
                </li>
                <li>
                    <a href="integral.html">
                       <img src="images/icon4.png" alt="" style="width:25px">
                       <p>积分兑换</p>
                    </a>
                </li>
                <li >
                    <a href="setting.html">
                       <img src="images/icon5.png" alt="" style="width:30px">
                       <p>设置</p>
                    </a>
                </li>
            </ul>
        </div>
        
        <!-- 右侧内容 -->
        <div class="member-main" >
            <!-- 顶部导航 -->
            <div class="nav-top clearfix">
                <a href="" class="left">
                   <img src="images/arrow-left.png" alt="">
                </a>
                <span>会员系统</span>
                <a href="" class="right">
                    <img src="images/help.png" alt="">
                </a>
            </div>
            <div class="member-content clearfix">
                <div class="member-content-left" id="mleft">
                    <div class="member-left-top">
                        <h4>会员</h4>
                        <input type="submit" value="">
                    </div>
                    <div class="member-left-bottom">
                        <div class="member-la">
                            <div class="mamber-la-top clearfix">
                                <div class="left">
                                    <img src="images/user2.png" alt="">
                                </div>
                                <div class="ul right">
                                    <li><h5>无名氏（-）</h5></li>
                                    <li>性别：男</li>
                                    <li>手机：17706531129</li>
                                    <li>生日：1992-05-25</li>
                                    <li><a href="">修改会员资料</a></li>
                                </div>
                            </div>
                            <div class="mamber-la-center">
                                <div class="info"><a href="">会员资料</a></div>
                                <div class="cart">
                                    <div class="wlk" id="wlk" onclick="Show_Hidden(tr1)">万里卡</div>
                                    <ul id="tr1">
                                        <li class="clearfix">
                                            <div class="left">卡号</div>
                                            <div class="right">5221 5551 0052 052</div>
                                        </li>
                                        <li class="clearfix">
                                            <div class="left">促销方式</div>
                                            <div class="right">97.0%</div>
                                        </li>
                                        <li class="clearfix">
                                            <div class="left">办卡押金</div>
                                            <div class="right">1000.00</div>
                                        </li>
                                        <li class="clearfix">
                                            <div class="left">剩余押金</div>
                                            <div class="right">100.00</div>
                                        </li>
                                        <li class="clearfix">
                                            <div class="left">发卡日期</div>
                                            <div class="right">2016年8月1日</div>
                                        </li>
                                        <li class="wlk-cz clearfix">
                                            <div class="left" style="width:100%"><a href="charge.html" style="display:block;">充值与消费记录</a></div>
                                        </li>
                                        <li class="clearfix">
                                            <div class="left">积分余额</div>
                                            <div class="right">0.00</div>
                                        </li>
                                        <li class="wlk-tk clearfix">
                                            <a href="" data-target="#tuika" data-toggle="modal">退卡</a>
                                            <a href="" data-target="#gsk" data-toggle="modal">改刷卡密码</a>
                                            <a href="" data-target="#bffk" data-toggle="modal">补发发卡短信</a>
                                        </li>
                                    </ul>
                                </div>
                            </div>

                            <div class="mamber-la-bottom clearfix">
                                <a href="">挂失</a>
                                <a href="add-card.html">发卡</a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="member-content-right" id="mright">
                    <div class="member-right-top clearfix">
                        <div class="left">本点会员</div>
                        <div class="right">本店总会员：<b>1人</b><span>今天加入会员：<b>0人</b></span></div>
                    </div>
                    <div class="member-ra-center clearfix">
                        <div class="left">
                            <div class="select">
                                <p data-value="手机号码">手机号码</p>
                                <ul>
                                    <li data-value="手机号码" class="Selected">手机号码</li>
                                    <li data-value="名称">名称</li>
                                </ul>
                            </div>
                        </div>
                        <div class="right">
                            <form class="clearfix">
                                <input class="sb-search-input left-a"  type="text" value="" >
                                <input class="sb-search-submit left-b" type="submit" value="">
                            </form>
                        </div>
                    </div>
                    <div class="member-right-bottom">
                        <ul class="member-ra-bottom clearfix" id="nky">
                            <li class="active">
                               <img src="images/user2.png" alt="">
                               <p>无名氏（-）</p>
                               <p>17706531129</p>
                            </li>
                            <li class="">
                               <img src="images/user3.png" alt="">
                               <p>无名氏（-）</p>
                               <p>17706531129</p>
                            </li>
                            <li class="">
                               <img src="images/user4.png" alt="">
                               <p>无名氏（-）</p>
                               <p>17706531129</p>
                            </li>
                            <li class="">
                               <img src="images/user5.png" alt="">
                               <p>无名氏（-）</p>
                               <p>17706531129</p>
                            </li>
                            <li class="">
                               <img src="images/user6.png" alt="">
                               <p>无名氏（-）</p>
                               <p>17706531129</p>
                            </li>
                            <li class="">
                               <img src="images/user7.png" alt="">
                               <p>无名氏（-）</p>
                               <p>17706531129</p>
                            </li>
                            <li class="">
                               <img src="images/user8.png" alt="">
                               <p>无名氏（-）</p>
                               <p>17706531129</p>
                            </li>
                            <li class="">
                               <img src="images/user3.png" alt="">
                               <p>无名氏（-）</p>
                               <p>17706531129</p>
                            </li>
                            <li class="">
                               <img src="images/user4.png" alt="">
                               <p>无名氏（-）</p>
                               <p>17706531129</p>
                            </li>
                            <li class="">
                               <img src="images/user5.png" alt="">
                               <p>无名氏（-）</p>
                               <p>17706531129</p>
                            </li>
                            <li class="">
                               <img src="images/user6.png" alt="">
                               <p>无名氏（-）</p>
                               <p>17706531129</p>
                            </li>
                            <li class="">
                               <img src="images/user7.png" alt="">
                               <p>无名氏（-）</p>
                               <p>17706531129</p>
                            </li>
                            <li class="">
                               <img src="images/user8.png" alt="">
                               <p>无名氏（-）</p>
                               <p>17706531129</p>
                            </li>
                        </ul>
                    </div>

                    <ul class="page-nav clearfix">
                        <a href="" class="current">1</a>
                        <a href="" class="">2</a>
                        <a href="" class="">3</a>
                        <a href="" class="">4</a>
                        <a href="" class="">5</a>
                        <a href="" class="">6</a>
                        <a href="" class="">7</a>
                        <a href="" class="">8</a>
                        <a href="" class="">9</a>
                    </ul>
                </div>
            </div>
        </div>
    </div> 
   
    <!-- 改刷卡密码 -->
    <div class="modal fade tanchukuang" id="gsk" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
        <div class="modal-dialog modal-sm">
            <div class="modal-content gaishuaka">
                <div class="modal-header">
                    <h4 class="modal-title" id="myModalLabel">改刷卡密码</h4>
                </div>
                <div class="modal-body">
                    <div class="gaishuaka-a clearfix">
                        <div class="left"><input type="text" placeholder="新密码"></div>
                        <div class="right"><label for="">必填</label></div>
                    </div>
                    <div class="gaishuaka-a clearfix">
                        <div class="left"><input type="text" placeholder="确认新密码"></div>
                        <div class="right"><label for="">必填</label></div>
                    </div>
                </div>
                <div class="modal-footer">
                    <input type="submit" data-dismiss="modal" value="取消">
                    <input type="submit" value="确认">
                </div>
            </div>
        </div>
    </div>
    
    <!-- 退卡 -->
    <div class="modal fade tanchukuang" id="tuika" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
        <div class="modal-dialog modal-sm">
            <div class="modal-content tuika">
                <div class="modal-header">
                    <h4 class="modal-title" id="myModalLabel">退卡</h4>
                </div>
                <div class="modal-body">
                    <div class="tuika-b">
                        <div class="tuika-a clearfix">
                            <div class="left">会员</div>
                            <div class="right">无名氏（-）</div>
                        </div>
                        <div class="tuika-a clearfix">
                            <div class="left">手机号码</div>
                            <div class="right">17706531129</div>
                        </div>
                        <div class="tuika-a clearfix">
                            <div class="left">卡类型</div>
                            <div class="right">万利卡</div>
                        </div>
                        <div class="tuika-a clearfix">
                            <div class="left">卡号</div>
                            <div class="right">365036</div>
                        </div>
                        <div class="tuika-a clearfix">
                            <div class="left">办卡押金</div>
                            <div class="right">200.00</div>
                        </div>
                        <div class="tuika-a clearfix">
                            <div class="left">累计充值</div>
                            <div class="right">100.00</div>
                        </div>
                        <div class="tuika-a clearfix">
                            <div class="left">累计赠送</div>
                            <div class="right">50.00</div>
                        </div>
                        <div class="tuika-a clearfix">
                            <div class="left">累积消费</div>
                            <div class="right">300.00</div>
                        </div>
                        <div class="tuika-a clearfix">
                            <div class="left">剩余金额</div>
                            <div class="right">100.00</div>
                        </div>
                        <div class="tuika-a clearfix">
                            <div class="left">积分剩余</div>
                            <div class="right">100.00</div>
                        </div>
                    </div>
                    
                    <ul>
                        <li class="clearfix">
                            <div class="left">应退金额</div>
                            <div class="right">100.00</div>
                        </li>
                        <li class="clearfix">
                            <div class="left">实退金额</div>
                            <div class="right yellow">100.00</div>
                        </li>
                        <li class="clearfix">
                            <div class="left">打印凭条</div>
                            <div class="right"><input type="checkbox" name="my-checkbox" checked data-size="mini"></div>
                        </li>
                        <li class="clearfix">
                            <div class="left">备注</div>
                            <div class="right" style="width:220px;text-align:right">您已成功领取万利卡
                            </div>
                        </li>
                    </ul>
                </div>
                <div class="modal-footer">
                    <input type="submit" data-dismiss="modal" value="取消">
                    <input type="submit" value="确认">
                </div>
            </div>
        </div>
    </div>

   <!-- 补发发卡短信 -->
    <div class="modal fade tanchukuang" id="bffk" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
        <div class="modal-dialog modal-sm">
            <div class="modal-content bffk">
                <div class="modal-header">
                    <h4 class="modal-title" id="myModalLabel">补发发卡短信</h4>
                </div>
                <div class="modal-body">
                    <div class="bffk-a clearfix">
                        <div class="left">手机号</div>
                        <div class="right">17706531129</div>
                    </div>
                    <div class="bffk-a clearfix">
                        <div class="left">发卡通知短信预览</div>
                        <div class="right">剩余 <span class="yellow">0条</span><a href="">充值</a></div>
                    </div>
                    <div class="bffk-a clearfix">
                        <div class="left">短信内容预览</div>
                        <div class="right">（超过70字将两条发送）</div>
                    </div>
                    <div class="bffk-b">
                        <textarea type="textarea">您已成功领取万利卡，安装“火小二”应用即可使用。下 载地址：http://t.cn/8FUlluk。【渔人码头】
                        </textarea>
                    </div>
                </div>
                <div class="modal-footer">
                    <input type="submit" data-dismiss="modal" value="取消">
                    <input type="submit" value="确认">
                </div>
            </div>
        </div>
    </div>


    <!-- jQuery文件 -->
    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>  
    <script src="js/switch.js"></script>  
    <script>
        function alignHeight(eleA,eleB){
          if(!document.getElementById(eleA)){return false;}
          if(!document.getElementById(eleB)){return false;}
          var heightA = document.getElementById(eleA).clientHeight;
          var heightB = document.getElementById(eleB).clientHeight;
          if(heightA > heightB){
            document.getElementById(eleB).style.height = heightA + "px";
            document.getElementById(eleA).style.height = heightA + "px";
          }else{
            document.getElementById(eleA).style.height = heightB + "px";
            document.getElementById(eleB).style.height = heightB + "px";
          }
        }
        window.onload =function z_align(){
            alignHeight("mleft","mright");   
        }
    </script> 
    <script>
        function Show_Hidden(trid){
            if(trid.style.display=="block"){
                trid.style.display='none';
                $("#wlk").removeClass("wlk-down");
            }else{
                trid.style.display='block';
                $("#wlk").addClass("wlk-down");
            }
        }
        $(function (){
            $('#nky li').click(function (){
                //把之前已有的active去掉
                $('.active').removeClass('active');
                //当前点击的li加上class
                $(this).addClass("active");
            });
        })

    </script> 
    <script>
        $(function(){
            $(".select p").click(function(e){
                $(".select").toggleClass('open');
                e.stopPropagation();
            });
            
            $(".select ul li").click(function(e){
                var _this=$(this);
                $(".select > p").text(_this.attr('data-value'));
                _this.addClass("Selected").siblings().removeClass("Selected");
                $(".select").removeClass("open");
                e.stopPropagation();
            });
            $(document).on('click',function(){
                $(".select").removeClass("open");
            })   
        });
        $("[name='my-checkbox']").bootstrapSwitch();
    </script>

</body>
</html>